<template>
  <el-select
    v-if="!useVirtual"
    value-key="value"
    :model-value="modelValue"
    :multiple="false"
    placeholder="选择查房顺序"
    @change="change"
  >
    <el-option
      v-for="item in OpsData"
      :key="item.value"
      :label="item.label"
      :value="isObjectValue ? item : item.value"
    />
  </el-select>
  <VSelect
    v-else
    :ops-data="OpsData"
    value-key="value"
    label-key="label"
    :is-object-value="isObjectValue"
    :model-value="modelValue"
    :multiple="false"
    placeholder="选择查房顺序"
    @change="change"
  >
  </VSelect>
</template>

<script>
  /** 业务组件-查房方式选择器 */
  import VSelect from '@/components/common/virtual/v-select/index.vue';
  export default {
    name: 'CheckRoomSelector',
    components: {
      VSelect,
    },
    props: {
      modelValue: {
        type: [Number, String, Array, Object],
        default: '',
      },
      isObjectValue: {
        // select框绑定的值是对象 还是值
        type: Boolean,
        default: false,
      },
      useVirtual: {
        // 是否使用单例组件
        type: Boolean,
        default: false,
      },
    },
    emits: ['update:modelValue'],
    data() {
      return {
        OpsData: [
          { value: 1, label: '自上而下' },
          { value: 2, label: '自下而上' },
        ],
      };
    },
    methods: {
      change(val) {
        this.$emit('update:modelValue', val);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .el-select {
    height: 32px;
    :deep(.el-input) {
      height: 32px;
    }
    :deep(.el-select__tags) {
      height: 32px;
      .el-select-tags-wrapper {
        height: 35px;
        display: flex;
        overflow: auto;
      }
    }
  }
</style>
